@const BASE-COLOR: #5C4C4C;
@const INFO-COLOR: #FFF7E8;

html { background-color:@BASE-COLOR; } 

body
{
  font:10pt verdana;
  font-rendering-mode:classic;  
  margin:0;
  padding:0;
}

frameset#body 
{
  flow:horizontal;
  width:*;
  height:*; 
  background-color:@BASE-COLOR;
  overflow:hidden;
}

frameset#body > splitter { width:4dip; }

toolbar 
{
  flow:horizontal;
  background:transparent;
}
toolbar > button
{
  behavior:clickable;
  size: 34dip;
  padding:2dip;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:24dip;
  fill:@INFO-COLOR;
  cursor:pointer;
}

toolbar > button:hover {
  fill: morph(@INFO-COLOR,lighten:20%); 
}

toolbar > button:active {
  fill: morph(@INFO-COLOR,darken:20%); 
}


toolbar > button:disabled 
{
  fill:morph(@INFO-COLOR,@BASE-COLOR,mix:75%); 
}
toolbar > button.back    { background-image:url(path: M1408 960v-128q0-26-19-45t-45-19h-502l189-189q19-19 19-45t-19-45l-91-91q-18-18-45-18t-45 18l-362 362-91 91q-18 18-18 45t18 45l91 91 362 362q18 18 45 18t45-18l91-91q18-18 18-45t-18-45l-189-189h502q26 0 45-19t19-45zm256-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z); }
toolbar > button.forward { background-image:url(path: M1413 896q0-27-18-45l-91-91-362-362q-18-18-45-18t-45 18l-91 91q-18 18-18 45t18 45l189 189h-502q-26 0-45 19t-19 45v128q0 26 19 45t45 19h502l-189 189q-19 19-19 45t19 45l91 91q18 18 45 18t45-18l362-362 91-91q18-18 18-45zm251 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z); }

#index
{
  behavior:expandable-list;
  /*background: linear-gradient(top, #FFFFE9, #fff/40%, #FFFFE9);*/
  /*background-color:@INFO-COLOR; */
  width:max-content;
  height:*;
  margin:0;
  overflow:hidden;
}

#index > section { height:1*; transition: height sine-in-out 400ms; }   
#index > section > ul { visibility:collapse; background:@INFO-COLOR; }
#index > section:expanded { height:100*; }
#index > section:animating > ul { visibility:visible; overflow:hidden; }
#index > section:expanded > ul { visibility:visible; }

#index > section > caption { 
  background:@BASE-COLOR;
  color:@INFO-COLOR;
  display:block; 
  padding:0.25em 1em;
  cursor:pointer;
  border:1dip solid;
  border-color: #7C6C6C #4C3C3C #4C3C3C #7C6C6C;
}
#index li { display:block; }
#index li li { margin:0; }

#index > section > ul { height:*; overflow: scroll-indicator; border-spacing: 0.5em;}
#index ul { margin:0; padding:0.5em 0 0.5em 1em; }
#index ul ul { padding-top:0; }

#index a { text-decoration:none; }
#index a:hover { text-decoration:underline; }

#index ul.elements li { font-family: monospace; color:@BASE-COLOR; white-space:nowrap; }

#content    
{ 
  width:*; height:*; 
}

#toc
{
  font:system;
  background-color: @INFO-COLOR;
  width:200px;
  height:*;
  overflow:scroll-indicator;
  margin:0;
}

#toc > ul
{
  margin:4px;
  padding:0;
  flow:horizontal-flow;
}
#toc > ul > caption
{
  behavior:clickable;
  font-weight:bold;
  width:*;
  clear:right;
  //white-space:nowrap;
  overflow-x: hidden;
  cursor:pointer;
}
#toc > ul > li
{
  behavior:clickable;
  display:block;
  width:*;
  //white-space:nowrap;
  min-width:auto; /* all items have the same width equal to widest item */
  margin:4px;
  cursor:pointer;
}

#toc > ul > caption:hover,
#toc > ul > li:hover
{
  text-decoration:underline;
  color:red;
}



